<template>
  <div class="user_container">

    <!--头像部分-->
    <div class="avatar_container">
      <span class="round round1"></span>
      <span class="round round2"></span>

      <!-- 没有登录之前-->
      <div class="user_info" v-if="!flag">
        <div class="avatar_container">
          <span class="avatar">
             <img v-image-preview :src="defaultAvatar" alt="失败"/>
          </span>
        </div>
        <div class="title">
          <router-link to="/login" class="link">请先登录</router-link>
        </div>
      </div>
      <!--登录后-->
      <div class="user_info" v-if="flag">
        <div class="avatar_container">
          <span class="avatar">
             <img v-image-preview :src="userInfo.avatar" alt="失败"/>
          </span>
        </div>
        <div class="title">
          <p class="name">昵称：<span>{{ userInfo.name }}</span></p>
          <p class="account">账号:<span></span>{{ userInfo.account }}</p>
        </div>
      </div>
    </div>

    <!--订单情况部分-->
    <div class="order_container">
      <van-row class="order">
        <van-col span="6" class="order_item">
          <router-link tag="div" to="/order?type=0" class="link">
            <van-icon name="pending-payment" class="icon"/>
            <p class="title">待付款</p>
          </router-link>
        </van-col>
        <van-col span="6" class="order_item">
          <router-link tag="div" to="/order?type=2" class="link">
            <van-icon name="tosend" class="icon"/>
            <p class="title">待发货</p>
          </router-link>
        </van-col>
        <van-col span="6" class="order_item">
          <router-link tag="div" to="/order?type=3" class="link">
            <van-icon name="logistics" class="icon"/>
            <p class="title">已发货</p>
          </router-link>
        </van-col>
        <van-col span="6" class="order_item">
          <router-link tag="div" to="/order?type=4" class="link">
            <van-icon name="sign" class="icon"/>
            <p class="title">待收货</p>
          </router-link>
        </van-col>
      </van-row>
    </div>

    <!--其余部分-->
    <van-cell-group class="other_container">
      <van-cell is-link title="全部订单" to="/allOrder">
        <template #icon>
          <i class="fa fa-file-text icon"></i>
        </template>
      </van-cell>
      <van-cell is-link title="收货地址管理" to="/address/list">
        <template #icon>
          <i class="fa fa-address-book icon color"></i>
        </template>
      </van-cell>
      <van-cell is-link title="安全设置" to="/safe">
        <template #icon>
          <i class="fa fa-gear icon color1"/>
        </template>
      </van-cell>
      <van-cell is-link title="关于我们" to="/about">
        <template #icon>
          <i class="fa fa-info-circle icon color2"></i>
        </template>
      </van-cell>
    </van-cell-group>

  </div>
</template>

<script>
export default {
  name: "UserIndex",

  data() {
    return {
      userInfo: {},
      defaultAvatar: "http://127.0.0.1:3001/images/user/OIP.jpg",
      flag: false
    };
  },

  created() {
    if (localStorage.getItem("eleToken")) {
      this.getUserInfo();
      this.flag = true;
    }
  },

  methods: {
    async getUserInfo() {
      let res = await this.$axios.get(this.$api.current);
      if (res.status === 200) {
        this.userInfo = res.data;
      }
    },
  }
};
</script>

<style lang="less" scoped>

.user_container {

  .avatar_container {
    position: relative;
    height: 11rem;
    background-color: #4A87EA;

    .round {
      position: absolute;
      display: block;
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      background: #fff;
      opacity: .1;
    }

    .round1 {
      top: -5rem;
      left: -5rem;
    }

    .round2 {
      bottom: -1rem;
      left: 1rem;
    }

    .user_info {
      width: 100%;
      position: absolute;
      left: 0;
      top: 2.5rem;
      padding-left: 1.5rem;

      .avatar_container {
        float: left;
        box-sizing: border-box;
        padding: .2rem;
        text-align: center;
        height: 5rem;
        width: 5rem;
        border: 1px solid rgba(255, 255, 255, .6);
        border-radius: 50%;

        .avatar {
          display: block;
          height: 100%;
          box-sizing: border-box;
          padding: .2rem;
          border: 1px solid #fff;
          border-radius: 50%;
          overflow: hidden;

          img {
            border-radius: 50%;
            width: 100%;
            height: 100%;
          }
        }
      }

      .title {
        float: left;
        height: 5rem;
        font-size: 18px;
        margin-left: 16px;

        p {
          color: #000;
          margin: 0;

          &:nth-child(1) {
            margin-bottom: .5rem;
            margin-top: 10%;
          }
        }

        .link {
          color: #444;
          display: block;
          text-decoration: underline;
          margin-top: 50%;
        }
      }
    }

  }

  .order_container {
    padding: 0 1rem;
    height: 4.5rem;

    .order {
      height: 100%;
      border-radius: .5rem;
      overflow: hidden;
      background-color: #fff;
      transform: translateY(-40%);
      box-shadow: 0 0 10px #eee;

      .order_item {
        height: 100%;

        .link {
          height: 100%;
          text-align: center;

          .icon {
            margin-top: .5rem;
            font-size: 1.6rem;
          }

          .title {
            margin: 0;
          }
        }
      }
    }
  }

  .other_container {
    transform: translateY(-5%);

    .van-cell__title {
      font-size: .8rem;
      line-height: 20px;
    }

    .icon {
      font-size: 1rem;
      color: blue;
      padding-right: .5rem;
    }

    .color {
      color: #786AE4;
    }

    .color1 {
      color: green;
    }

    .color2 {
      color: orange;
    }
  }
}


</style>
